<template>
	<div id="mode1">
		<div >	
			<img src="../../static/background/backgroundImage.jpg" alt="" id="mode2"/>
		</div>
		<div id="mode3">
			<!--左边企业介绍-->
			<div id="mode4">
				<div id="mode6">
					<img src="../../static/logo/logo.jpg" alt="" id="mode5"/>
				</div>
				<div id="mode7">
					<div id="mode10">
						<i class="el-icon-tickets" id="mode14"></i>
					</div>
					<div id="mode11">
						<div id="mode12">
							11000000
						</div>
						<div id="mode13">
							企业接入数
						</div>
					</div>
				</div>
				<div id="mode7">
					<div id="mode10">
						<i class="el-icon-goods" id="mode14"></i>
					</div>
					<div id="mode11">
						<div id="mode12">
							快捷
						</div>
						<div id="mode13">
							随时掌握产品信息
						</div>
					</div>
				</div>
				<div id="mode7">
					<div id="mode10">
						<i class="el-icon-mobile-phone" id="mode14"></i>
					</div>
					<div id="mode11">
						<div id="mode12">
							科技
						</div>
						<div id="mode13">
							以人为本
						</div>
					</div>
				</div>
			</div>
		
			<div>
				<!--右边登录组件-->
			</div>
		</div>
	</div>
</template>

<script>

	export default{
		mounted(){
			this.changeBackgroundImg();
		},
		methods:{
			//(1)PC端根据不同屏幕不同宽高做适配，如果是请求来源是移动端，跳到移动端登录路由
			changeBackgroundImg(){
				if(/Android|webOS|iPhone|iPod|BlackBerry|iPad|Nexus/i.test(navigator.userAgent)) {
					//1.1移动端请求
//  			window.location.href = "https://www.baidu.com/";
				} else {
					//1.2PC端请求
					if(window.screen.height>="1080"){
						//1920*1080分辨率的电脑
					
						document.getElementById("mode1").style.height = "853px";
						console.log(document.getElementById("mode1").style.height);
					}
					else if(window.screen.height>="1366"){
						//1366*1080分辨率电脑
						document.getElementById("mode1").style.height = "599px";
					}
//						left:522px;
//position: absolute;
//	top:200px;
					
				}
				
//				console.log(screen.width);
//				console.log(screen.height);
			}
		}
	}
	
</script>

<style>
#mode1{
	position:absolute;
}	
	
#mode2{
	height:853px;
	width:100%;
}

#mode3{
	border-radius:8px;
	background-color: white;
	height: 470px;
	width:39%;
	left:30.5%;
	position: absolute;
	top:200px;
}

#mode4{
	border-radius:8px;
	float:left;
	background-color: rgb(248,252,255);
	height:470px;
	width:33%;
}

#mode5{
	border-radius:6px;
	width:37px;
	height:37px;
	margin-top:30px;
	margin-left:30px;

}

#mode6{
	height:120px;
	width:100%;
	/*background-color: yellow;*/
}

#mode7{
	height:120px;
	width:100%;
	/*background-color: green;*/
}

#mode8{
	height:120px;
	width:100%;
	/*background-color: pink;*/
}

#mode9{
	height:120px;
	width:100%;
	/*background-color: black;*/
}

#mode10{
	height: 120px;
	width:40%;
	/*background-color: greenyellow;*/
	float:left;
}

#mode11{
	float:right;
	height: 120px;
	width:60%;
	/*background-color: lightskyblue;*/
}

#mode12{
	width:100%;
	height:30px;
	/*background-color: darkslategrey;*/
	vertical-align:bottom;
	display:table-cell;
	font-size:14px;
	color:rgb(141,140,161);
}

#mode13{
	width:100%;
	height:30px;
	/*background-color: yellow;*/
	font-size:12px;
	margin-top:5px;
	color:rgb(176,187,211);
}

#mode14{
	font-size: 24px;
	margin-top:27%;
	margin-left:50%;
	color:rgb(228,232,237);
}

#mode15{
	margin-bottom: 0px;
}
</style>